<template>
  <div class="card content-box">
    <!-- 添加日期选择器 -->
    <!-- 添加选择器以选择时间范围 -->

    <el-select v-model="selectedType" placeholder="选择日/周/月" size="large" style="width: 240px" @click="updateChart">
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>

    <!-- ECharts图表 -->
    <ECharts :option="option" />
  </div>
</template>

<script setup name="lineChart">
import { onMounted, ref, watch } from "vue";
import { getDayService, getMonthService, getWeekService } from "@/api/bigdata/index";
// 其他导入...

// 初始图表配置...
const option = {
  title: {
    text: "Stacked Area Chart",
    textStyle: {
      color: "#a1a1a1"
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    textStyle: {
      color: "#a1a1a1"
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [""] // 初始化为空，将根据选择动态填充
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#a1a1a1"
      }
    }
  ],
  series: [
    {
      name: "",
      type: "line",
      stack: "Total",
      areaStyle: {},
      emphasis: {
        focus: "series"
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

const options = ref([
  {
    name: "日",
    value: "day"
  },
  {
    name: "周",
    value: "week"
  },
  {
    name: "月",
    value: "month"
  }
]);

//用到的数据模型
const week = ref([
  {
    week: 1,
    count: 7
  }
]);

const day = ref([
  {
    Count: 1,
    Date: "2024-07-11"
  }
]);

const month = ref([
  {
    month: 7,
    count: 12
  }
]);

//获取每天、周、月的统计量
const getDay = async () => {
  let result = await getDayService();
  day.value = result.data;
};

const getWeek = async () => {
  let result = await getWeekService();
  week.value = result.data;
};

const getMonth = async () => {
  let result = await getMonthService();
  month.value = result.data;
};

//加载自动获取数据
onMounted(getDay);
onMounted(getWeek);
onMounted(getMonth);

// 定义当前选择的时间范围类型
const selectedType = ref("day");

// 根据选择的时间范围更新图表数据
const updateChart = () => {
  let xAxisData = [];
  let seriesData = [];

  switch (selectedType.value) {
    case "day":
      day.value.forEach(item => {
        xAxisData.push(item.Date);
        seriesData.push(item.Count);
      });
      break;
    case "week":
      for (let i = 1; i <= week.value[0].count; i++) {
        xAxisData.push(`${i}周`);
        seriesData.push(week.value[i].count); // 示例数据
      }
      break;
    case "month":
      for (let i = 1; i <= month.value[0].count; i++) {
        xAxisData.push(`${i}月`);
        seriesData.push(month.value[i].count); // 示例数据
      }
      break;
  }
};
// 监听selectedType的变化
watch(selectedType, updateChart);

// 初始化图表
updateChart();
</script>

<style scoped lang="scss">
@import "./index";
.select-container {
  /* 容器样式 */
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
.custom-select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  color: #333333;

  /* select 样式 */
  appearance: none; /* 移除默认样式 */
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none; /* 点击时不显示轮廓 */
}
</style>
